<template>
  <div class="real-time-stats">
    <div class="module-title">
      <div class="title-icon">📊</div>
      <div class="title-text">实时健康数据统计</div>
    </div>
    
    <div class="stats-content">
      <!-- 各工种健康状态 - 占50%高度 -->
      <div class="health-status-section">
        <div class="section-title">
          <span class="title-icon">👷</span>
          <span class="title-text">各工种健康状态</span>
        </div>
        
        <div class="worker-list">
          <div 
            v-for="(worker, index) in workerTypes" 
            :key="index"
            class="worker-item"
            :class="{'danger': worker.healthRate < 85, 'warning': worker.healthRate >= 85 && worker.healthRate < 90}"
          >
            <div class="worker-header">
              <div class="worker-info">
                <span class="worker-icon">{{ worker.icon }}</span>
                <span class="worker-name">{{ worker.name }}</span>
                <span class="worker-count">({{ worker.total }}人)</span>
              </div>
              <div class="health-rate" :class="getHealthRateClass(worker.healthRate)">
                健康度: {{ worker.healthRate }}%
              </div>
            </div>
            
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{ width: worker.healthRate + '%' }"
                :class="getHealthRateClass(worker.healthRate)"
              >
                <div class="progress-glow"></div>
              </div>
            </div>
            
            <div class="worker-detail">
              <div class="status-item normal">
                <span class="status-icon">✅</span>
                <span class="status-text">正常:{{ worker.normal }}</span>
              </div>
              <div class="status-item warning">
                <span class="status-icon">⚠️</span>
                <span class="status-text">异常:{{ worker.abnormal }}</span>
              </div>
              <div class="status-item danger">
                <span class="status-icon">🚨</span>
                <span class="status-text">高危:{{ worker.danger }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 异常统计 - 占25%高度 -->
      <div class="anomaly-statistics">
        <div class="section-title">
          <span class="title-icon">⚠️</span>
          <span class="title-text">异常统计</span>
        </div>
        <div class="anomaly-content">
          <div class="anomaly-grid">
            <div 
              v-for="(item, index) in anomalyStats" 
              :key="index"
              class="anomaly-item"
              :class="item.level"
            >
              <div class="anomaly-icon">{{ item.icon }}</div>
              <div class="anomaly-info">
                <div class="anomaly-label">{{ item.label }}</div>
                <div class="anomaly-value">
                  <span class="value-number">{{ item.value }}</span>
                  <span class="value-unit">{{ item.unit }}</span>
                </div>
              </div>
              <div class="anomaly-trend" :class="item.trend">
                {{ item.trend === 'up' ? '↑' : '↓' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'RealTimeStats',
  data() {
    return {
      workerTypes: [
        {
          icon: '🔨',
          name: '钢筋工',
          total: 32,
          normal: 28,
          abnormal: 3,
          danger: 1,
          healthRate: 92
        },
        {
          icon: '🏗️',
          name: '混凝土工',
          total: 28,
          normal: 24,
          abnormal: 3,
          danger: 1,
          healthRate: 88
        },
        {
          icon: '⚡',
          name: '电焊工',
          total: 18,
          normal: 15,
          abnormal: 2,
          danger: 1,
          healthRate: 85
        }
      ],
      anomalyStats: [
        {
          icon: '⚠️',
          label: '异常人员',
          value: 8,
          unit: '人',
          level: 'warning',
          trend: 'down'
        },
        {
          icon: '🚨',
          label: '高危人员',
          value: 3,
          unit: '人',
          level: 'danger',
          trend: 'down'
        },
        {
          icon: '📊',
          label: '总体异常率',
          value: 14.1,
          unit: '%',
          level: 'normal',
          trend: 'down'
        },
        {
          icon: '🔔',
          label: '今日预警',
          value: 12,
          unit: '次',
          level: 'info',
          trend: 'up'
        }
      ],
      timer: null
    }
  },
  methods: {
    getHealthRateClass(rate) {
      if (rate >= 95) return 'excellent'
      if (rate >= 90) return 'good'
      if (rate >= 85) return 'warning'
      return 'danger'
    },
    
    // 模拟数据更新
    updateData() {
      this.workerTypes.forEach(worker => {
        // 随机小幅度变化
        const change = Math.floor(Math.random() * 3) - 1
        const newRate = worker.healthRate + change
        worker.healthRate = Math.max(80, Math.min(98, newRate))
        
        // 根据健康度调整人数分布
        const total = worker.total
        if (worker.healthRate >= 95) {
          worker.normal = total - 1
          worker.abnormal = 1
          worker.danger = 0
        } else if (worker.healthRate >= 90) {
          worker.normal = total - 2
          worker.abnormal = 2
          worker.danger = 0
        } else if (worker.healthRate >= 85) {
          worker.normal = total - 3
          worker.abnormal = 2
          worker.danger = 1
        } else {
          worker.normal = total - 4
          worker.abnormal = 3
          worker.danger = 1
        }
      })
      
      // 更新异常统计数据
      this.updateAnomalyStats()
    },
    
    // 更新异常统计
    updateAnomalyStats() {
      let totalAbnormal = 0
      let totalDanger = 0
      let totalWorkers = 0
      
      this.workerTypes.forEach(worker => {
        totalAbnormal += worker.abnormal
        totalDanger += worker.danger
        totalWorkers += worker.total
      })
      
      // 更新异常人员数
      this.anomalyStats[0].value = totalAbnormal
      this.anomalyStats[0].trend = Math.random() > 0.5 ? 'down' : 'up'
      
      // 更新高危人员数
      this.anomalyStats[1].value = totalDanger
      this.anomalyStats[1].trend = Math.random() > 0.6 ? 'down' : 'up'
      
      // 更新总体异常率
      const anomalyRate = ((totalAbnormal + totalDanger) / totalWorkers * 100).toFixed(1)
      this.anomalyStats[2].value = parseFloat(anomalyRate)
      this.anomalyStats[2].trend = 'down'
      
      // 今日预警次数随机变化
      const warningChange = Math.floor(Math.random() * 3) - 1
      this.anomalyStats[3].value = Math.max(0, this.anomalyStats[3].value + warningChange)
      this.anomalyStats[3].trend = warningChange > 0 ? 'up' : 'down'
    },
    
    startDataUpdate() {
      this.timer = setInterval(() => {
        this.updateData()
      }, 5000) // 每5秒更新一次
    }
  },
  
  mounted() {
    this.startDataUpdate()
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang="scss" scoped>
.real-time-stats {
  height: 100%;
  padding: 10px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .title-icon {
      font-size: 14px;
      margin-right: 5px;
    }
    
    .title-text {
      font-size: 14px;
      font-weight: bold;
      color: #4fc3f7;
      letter-spacing: 0.5px;
    }
  }
  
  .stats-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 5px;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .health-status-section {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(79, 195, 247, 0.3);
      flex-shrink: 0;
      
      .title-icon {
        font-size: 14px;
        margin-right: 6px;
      }
      
      .title-text {
        font-size: 13px;
        font-weight: bold;
        color: #4fc3f7;
        letter-spacing: 0.5px;
      }
    }
    
    .worker-list {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 5px;
      
      &::-webkit-scrollbar {
        width: 4px;
      }
      
      &::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(79, 195, 247, 0.3);
        border-radius: 2px;
        
        &:hover {
          background: rgba(79, 195, 247, 0.5);
        }
      }
      
      .worker-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(79, 195, 247, 0.2);
        border-radius: 4px;
        padding: 8px 10px;
        margin-bottom: 8px;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(79, 195, 247, 0.4);
          transform: translateX(3px);
        }
        
        &.warning {
          border-color: rgba(255, 193, 7, 0.3);
        }
        
        &.danger {
          border-color: rgba(244, 67, 54, 0.3);
          background: rgba(244, 67, 54, 0.05);
        }
        
        .worker-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
          
          .worker-info {
            display: flex;
            align-items: center;
            
            .worker-icon {
              font-size: 16px;
              margin-right: 6px;
            }
            
            .worker-name {
              font-size: 13px;
              font-weight: bold;
              color: #fff;
              margin-right: 4px;
            }
            
            .worker-count {
              font-size: 11px;
              color: #999;
            }
          }
          
          .health-rate {
            font-size: 12px;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 3px;
            
            &.excellent {
              color: #4caf50;
              background: rgba(76, 175, 80, 0.2);
            }
            
            &.good {
              color: #2196f3;
              background: rgba(33, 150, 243, 0.2);
            }
            
            &.warning {
              color: #ff9800;
              background: rgba(255, 152, 0, 0.2);
            }
            
            &.danger {
              color: #f44336;
              background: rgba(244, 67, 54, 0.2);
            }
          }
        }
        
        .progress-bar {
          height: 5px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 3px;
          overflow: hidden;
          margin-bottom: 6px;
          position: relative;
          
          .progress-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.5s ease;
            position: relative;
            overflow: hidden;
            
            &.excellent {
              background: linear-gradient(90deg, #4caf50, #66bb6a);
            }
            
            &.good {
              background: linear-gradient(90deg, #2196f3, #42a5f5);
            }
            
            &.warning {
              background: linear-gradient(90deg, #ff9800, #ffa726);
            }
            
            &.danger {
              background: linear-gradient(90deg, #f44336, #ef5350);
            }
            
            .progress-glow {
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
              );
              animation: progressGlow 2s infinite;
            }
          }
        }
        
        .worker-detail {
          display: flex;
          justify-content: space-between;
          
          .status-item {
            display: flex;
            align-items: center;
            font-size: 11px;
            
            .status-icon {
              font-size: 12px;
              margin-right: 3px;
            }
            
            .status-text {
              color: #ccc;
            }
            
            &.normal .status-text {
              color: #4caf50;
            }
            
            &.warning .status-text {
              color: #ff9800;
            }
            
            &.danger .status-text {
              color: #f44336;
            }
          }
        }
      }
    }
  }
  
  // 异常统计样式
  .anomaly-statistics {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    overflow: hidden;
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 152, 0, 0.3);
      flex-shrink: 0;
      
      .title-icon {
        font-size: 13px;
        margin-right: 5px;
        animation: pulse 2s infinite;
      }
      
      .title-text {
        font-size: 12px;
        font-weight: bold;
        color: #ff9800;
        letter-spacing: 0.5px;
      }
    }
    
    .anomaly-content {
      flex: 1;
      overflow: hidden;
      
      .anomaly-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        height: 100%;
        
        .anomaly-item {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(79, 195, 247, 0.2);
          border-radius: 4px;
          padding: 8px;
          display: flex;
          align-items: center;
          gap: 6px;
          transition: all 0.3s ease;
          position: relative;
          overflow: hidden;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          }
          
          &.warning {
            border-color: rgba(255, 152, 0, 0.3);
            background: rgba(255, 152, 0, 0.05);
          }
          
          &.danger {
            border-color: rgba(244, 67, 54, 0.3);
            background: rgba(244, 67, 54, 0.05);
            
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                90deg,
                transparent,
                rgba(244, 67, 54, 0.1),
                transparent
              );
              animation: slideWarning 3s infinite;
            }
          }
          
          &.normal {
            border-color: rgba(76, 175, 80, 0.3);
          }
          
          &.info {
            border-color: rgba(33, 150, 243, 0.3);
          }
          
          .anomaly-icon {
            font-size: 20px;
            flex-shrink: 0;
          }
          
          .anomaly-info {
            flex: 1;
            min-width: 0;
            
            .anomaly-label {
              font-size: 10px;
              color: #999;
              margin-bottom: 2px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .anomaly-value {
              display: flex;
              align-items: baseline;
              
              .value-number {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
                margin-right: 2px;
              }
              
              .value-unit {
                font-size: 10px;
                color: #999;
              }
            }
          }
          
          .anomaly-trend {
            font-size: 14px;
            font-weight: bold;
            flex-shrink: 0;
            
            &.up {
              color: #f44336;
              animation: trendUp 1s ease-in-out infinite;
            }
            
            &.down {
              color: #4caf50;
              animation: trendDown 1s ease-in-out infinite;
            }
          }
        }
      }
    }
  }
  
}

@keyframes progressGlow {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes slideWarning {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes trendUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes trendDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}
</style>
